<template>
    <div>
        菜单管理
        <div style="margin:16px;margin-left:0">
            <el-button @click="visible=true">+ 新增</el-button>
            <el-button @click="visibleEdit=true">* 编辑</el-button>
            <el-button @click="open">- 删除</el-button>
        </div>
        <el-table 
        :data="menus"
        row-key="id"
        border
        @selection-change="handleSelectionChange"
        :tree-props="{children: 'children'}"
        >
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column
      prop="name"
      label="名称"
      sortable
      width="180">
      </el-table-column>
      <el-table-column
      prop="path"
      label="url" 
      width="180">
      </el-table-column>
      <el-table-column
      
      label="图标"     
      width="180">
        <template slot-scope="scope">
            <i :class="scope.row.icon" style="font-size: 48px;"></i>            
        </template>
      </el-table-column>
      <el-table-column
      prop="component"
      label="组件名"     
      ></el-table-column>
      <el-table-column
      prop="meta"
      label="元信息"     
      >
      </el-table-column>
      <el-table-column
      prop="des"
      label="描述"     
      >
    </el-table-column>
      <el-table-column
      prop="linkname"
      label="key" 
      width="180"    
      >
      </el-table-column>
        </el-table>
        <AddMenu 
        :parent="multipleSelection[0]"
        :visible.sync="visible" @addSuccess="getMenu()"></AddMenu>
        <!-- 
            :visible.sync="visible"
            =
            :visible="visible"
            @update:visible="visible=$event"
         -->
         <EditMenu  
         @editSuccess="getMenu()"
         :visible.sync="visibleEdit"
         :parent="multipleSelection[0]">
         </EditMenu>
         
         <!-- <EditMenu  
         @editSuccess="getMenu()"
         v-if="visibleEdit"
         :visible="visibleEdit"
         @update:visible="visibleEdit=$event"
         :parent="multipleSelection[0]">
         </EditMenu> -->
         <!-- 
             :visible.sync="visibleEdit" 隐藏显示组件 props取第一次传入的值（null）（采用默认值）
             解决办法：监听props的parent更新组件的menu

              v-if="visibleEdit" 销毁重建组件 props取最新的值
          -->
    </div>
</template>
<script>
import {GetAllMenu,DelMenu} from '@/api/permission'
// 导入新增弹框组件
import AddMenu from '$c/AddMenu'
import EditMenu from '@/components/EditMenu'
export default {
    // 注册组件
    components:{
        AddMenu,EditMenu
    },

    data(){
        return {
            // 定义所有菜单
            menus:[],
            // 选中的行
             multipleSelection: [],
            // 是否显示添加菜单组件AddMenu
            visible:false,
            // 是否显示编辑框
            visibleEdit:false,
            
        }
    },
    created(){
        // 创建成功，默认获取一次
        this.getMenu();
    },
    methods:{
        // 选择发生变化
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 获取所有菜单
        getMenu(){
            GetAllMenu()
            .then(res=>{
                // 更新菜单信息
                this.menus = res.data.list;
                // 调用vuex中的获取权限命令(更新左侧菜单)
                this.$store.dispatch("getMenu");
            })
            
        },
        delMenu(){
            // 映射出一个promise列表
            var list = this.multipleSelection.map(item=>DelMenu(item.id))
            // .all多个promise全部执行完毕后才执行.then
            // .race 有个最先执行
            Promise.all(list)
            .then(()=>{
                this.$message({
                    type:"success",
                    message:"删除成功"
                })
                // 更新菜单
                this.getMenu();
            })
            .catch(()=>{
                this.$message({
                    type:"info",
                    "message":"批量删除失败"
                })
            })
            // for(let i=0;i<this.multipleSelection.length;i++){
            //     DelMenu(this.multipleSelection[i].id)
            //     .then(res=>{
            //         console.log(res.data.msg);
            //     })
            // }
        },
        open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.delMenu()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
}
</script>